<template>
  <!-- <nav>
      <router-link to="/">电影/影院</router-link>
      <router-link to="/video">视频</router-link>
      <router-link to="/shortvideo">小视频</router-link>
      <router-link to="/show">演出</router-link>
      <router-link to="/me">我的</router-link>
    </nav> -->
  <div class="myfooter">
    <router-link to="/movie" class="link nav-icon-wrapper">
      <span class="iconfont icon-dianying"></span>
      <span class="nav-text">电影/影院</span>
    </router-link>
    <router-link to="/video" class="link nav-icon-wrapper">
      <span class="iconfont icon-shipin"></span>
      <span class="nav-text">视频</span>
    </router-link>
    <router-link to="/shortvideo" class="link nav-icon-wrapper">
      <span class="iconfont icon-shipin1"></span>
      <span class="nav-text">小视频</span>
    </router-link>
    <router-link to="/show" class="link nav-icon-wrapper">
      <span class="iconfont icon-yanchu-xianxing2-0"></span>
      <span class="nav-text">演出</span></router-link
    >
    <router-link to="/me" class="link nav-icon-wrapper">
      <span class="iconfont icon-wode"></span>
      <span class="nav-text">我的</span></router-link
    >
  </div>
</template>

<script>
export default {
  name: "MyFooter",
};
</script>

<style lang="less">
.myfooter {
  position: fixed;
  width: 100%;
  height: 1.3067rem;
  bottom: -1px;
  background: #fff;
  border-top: 1px solid #d8d8d8;
  display: flex;
  justify-content: space-around;
  z-index: 999;

  .nav-icon-wrapper {
    width: 0.6933rem;
    height: 1.3333rem;
    line-height: 1.3333rem;
    text-align: center;
    color: #696969;
    flex: 1;

    .iconfont {
      position: relative;
      font-size: 0.6933rem;
      display: block;
      margin: auto;
      top: -0.1867rem;
    }

    .nav-text {
      position: relative;
      top: -0.9067rem;
      font-size: 12px;
    }

    &.router-link-active {
      span {
        color: #f03d37;
      }
    }
  }
}
</style>